<script setup>
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import myAxios from "../plugins/myAxios.ts";
import {showSuccessToast, showFailToast} from "vant";
import qs from 'qs'
import UserCardList from "../components/UserCardList.vue";

const route = useRoute()
const {tags} = route.query;

// const mockUser = {
//   id: 123,
//   username: '小瑶今天不开心',
//   userAccount: 'missY',
//   avatarUrl: 'https://tupian.qqw21.com/article/UploadPic/2020-9/20209112265667154.jpg',
//   gender: '女',
//   phone: '123456',
//   email: '46546546@qq.com',
//   planetCode: '1545',
//   createTime: new Date(),
//   tags: ['java', 'emo', '打工中'],
// }

const userList = ref([]);
const loading = ref()

onMounted(async () => {
  console.log(tags)
  loading.value = true
  const userListData = await myAxios.get('/user/search/tags', {
    params: {
      tagNameList: tags
    },
    //序列化
    paramsSerializer: {
      serialize: params => qs.stringify(params, {indices: false}),
    }
  })
      .then((response) => {
        console.log('/user/search/tags succeed', response);
        showSuccessToast('请求成功');
        return response?.data;
      })
      .catch((error) => {
        console.log('/user/search/tags error', error);
        showFailToast('请求失败');
      })
  if (userListData) {
    console.log(userListData)
    userListData.forEach(user => {
      if (user.tags) {
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListData;
  }
  loading.value = false
})

</script>

<template>
  <user-card-list :user-list="userList" :loading="loading"/>
  <van-empty v-if="!userList || userList.length < 1" description="搜索结果为空"/>
</template>

<style scoped>

</style>